import React, { useState, useEffect, useContext } from 'react'
import { useSelector } from 'react-redux'
import dayjs from 'dayjs'
import { Table, Button } from 'antd'
import { getEmergencyQuestionsDisplay } from '&/api/electricity'
import Container from '@/appComponents/Container'
import Filter from './Filter'
import downloadExcelImg from '&/commonjs/downloadExcelImg'
import { LayoutContext } from '&/pages/layouts/context'
import './index.scss'
const defaultColumns = [
  {
    title: '序号',
    width: 70,
    render: (_, __, index) => `${index + 1}`,
    align: 'center'
  },
  {
    title: '预案名称',
    width: 100,
    dataIndex: 'plan_name',
    key: 'plan_name',
    align: 'center'
  },
  {
    title: '企业名称',
    width: 150,
    dataIndex: 'ent_name',
    key: 'ent_name',
    align: 'center'
  },
  {
    title: '所属区',
    width: 100,
    dataIndex: 'county_name',
    key: 'county_name',
    align: 'center'
  },
  {
    title: '所属街乡',
    width: 100,
    dataIndex: 'town_name',
    key: 'town_name',
    align: 'center'
  },
  {
    title: '措施要求',
    width: 150,
    dataIndex: 'measure',
    key: 'measure',
    align: 'center'
  },
  {
    title: '问题描述',
    width: 150,
    dataIndex: 'content',
    key: 'content',
    align: 'center'
  },
  {
    title: '开始时间',
    width: 100,
    dataIndex: 'start_time',
    key: 'start_time',
    align: 'center'
  },
  {
    title: '结束时间',
    width: 100,
    dataIndex: 'end_time',
    key: 'end_time',
    align: 'center'
  },
  {
    title: '报警时长',
    width: 100,
    dataIndex: 'total_duration',
    key: 'total_duration',
    align: 'center'
  },
  {
    title: '备注图片',
    width: 100,
    dataIndex: 'active_img',
    key: 'active_img',
    align: 'center'
  },
  {
    title: '操作',
    align: 'center',
    width: 100,
    render: () => {
      return <Button onClick={()=>{
      handlesend()}
      } type='primary'>下发</Button>
    }
  }
]
  const handlesend = () =>{
    console.log("测试")
  }
const FeedbackChecklist = () => {
  const { activePlan } = useContext(LayoutContext)
  const [tableData, setTableData] = useState([])
  const [loading, setLoading] = useState()
  const [pageInfo, setPageInfo] = useState({})
  const [columns, setCollumns] = useState(defaultColumns)
  const [paramsData, setParamsData] = useState({
    start_time: dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:00:00'),
    end_time: dayjs().subtract(0, 'day').format('YYYY-MM-DD HH:00:00'),
    county_id: -1,
    ent_name: -1
  })
  useEffect(() => {
    onQuery()
  }, [])

  const onQuery = async (v) => {
    setLoading(true)
    let json = getParams(paramsData)
    let res = await getEmergencyQuestionsDisplay(json)
    setLoading(false)
    if (res.length) {
      setTableData(res)
    } else {
      setTableData([])
    }
  }
  const getParams = (params) => {
    let newParams = {}
    for (let key in params) {
      if (params[key] !== -1) {
        newParams[key] = params[key]
      }
    }
    return newParams
  }



  const downloadExcel = () => {
    downloadExcelImg(tableData, columns, '反馈清单')
  }
  return (
    <Container>
      <Container.ContainerQuery title="查询条件">
        <Filter
          handleQuery={onQuery}
          paramsData={paramsData}
          setParamsData={setParamsData}
          loading={loading}
        />
      </Container.ContainerQuery>
      <Container.ContainerContent>
        <div className="FeedbackChecklist_title">
          <div className="tit">查询结果</div>
          <div className="sub">
            <Button
              type="primary"
              onClick={() => {
                downloadExcel()
              }}
            >
              导出
            </Button>
          </div>
        </div>
        <Table
          className="FeedbackChecklist_table"
          bordered
          loading={loading}
          columns={columns}
          dataSource={tableData}
          pagination={{
            ...pageInfo,
            defaultPageSize: 20,
            position: ['bottomCenter']
          }}
          size="small"
          scroll={{
            y: '65vh'
          }}
        />
      </Container.ContainerContent>
    </Container>
  )
}
export default FeedbackChecklist
